<template>
  <div>
    <!-- ######样式未完成 -->

    <div class="header">
      <div class="info-card">
        <div class="title">
          <img class="icon" src="@/assets/work_watch/work.png" alt="">
          <span>今日作业人数：</span>
        </div>
        <div class="detail-box">
          <div class="left">
            <span class="count big">{{ monitorDetail.onLineAccountCount || 0 }}</span>
            <span>/ 在线</span>
          </div>
          <div class="right">
            <div class="item">
              <span class="count">{{ monitorDetail.offLineAccountCount || 0 }}</span>
              <span>/ 离线</span>
            </div>
          </div>
        </div>
      </div>
      <div class="info-card">
        <div class="title">
          <img class="icon" src="@/assets/work_watch/work.png" alt="">
          <span>今日作业车辆数：</span>
        </div>
        <div class="detail-box">
          <div class="left">
            <span class="count big">{{ monitorDetail.onLineCatCount || 0 }}</span>
            <span>/ 在线</span>
          </div>
          <div class="right">
            <div class="item">
              <span class="count">{{ monitorDetail.offLineCarCount || 0 }}</span>
              <span>/ 离线</span>
            </div>
          </div>
        </div>
      </div>
      <div class="info-card">
        <div class="title">
          <img class="icon" src="@/assets/work_watch/work.png" alt="">
          <span>今日事件数：</span>
        </div>
        <div class="detail-box">
          <div class="left">
            <span class="count big">{{ monitorDetail.inEventCount || 0 }}</span>
            <span>/ 处理中</span>
          </div>
          <div class="right">
            <div class="item">
              <span class="count">{{ monitorDetail.processedEventCount || 0 }}</span>
              <span>/ 已处理</span>
            </div>
            <div class="item">
              <span class="count">{{ monitorDetail.closedEventCount || 0 }}</span>
              <span>/ 已完成</span>
            </div>
          </div>
        </div>
      </div>
      <div class="info-card">
        <div class="title">
          <img class="icon" src="@/assets/work_watch/work.png" alt="">
          <span>今日告警次数：</span>
        </div>
        <div class="detail-box">
          <div class="left">
            <span class="count big">{{ monitorDetail.alarmCount || 0 }}</span>
            <span>/ 告警</span>
          </div>
        </div>
      </div>
    </div>

    <task-watch-map
      :theme="isDarkTheme"
      :data-source="mapDataSource"
      @on-marker-click="handleMarkerClick"
    />
    <baidu-map />
    <task-list ref="taskListRef" />
    <video-player ref="videoPlayerRef" />
    <detail-view ref="detailViewRef" />
  </div>
</template>

<script>
import { fetchMonitorGet, fetchMonitorCamera } from '@/api/sanitation/monitoring'
import TaskWatchMap from '../components/task_watch_map'
import TaskList from '../components/task_watch_list'
import VideoPlayer from '@/components/VideoPlayer'
import DetailView from './detail'
import { inViolateDetailRender, eventDetailRender } from './config'

export default {
  name: 'Monitoring',
  components: { TaskList, TaskWatchMap, VideoPlayer, DetailView },
  data() {
    return {
      monitorDetail: {}
    }
  },
  computed: {
    isDarkTheme: function() {
      return this.$store.state.settings.isDarkTheme
    },
    mapDataSource: function() {
      return {
        cameras: this.$data.monitorDetail.camerasList,
        load: this.$data.monitorDetail.roadList.map(e => ({ ...e, ...this.parsePosition(e.coordinateSet) })),
        part: this.$data.monitorDetail.componentsList.map(e => ({ ...e, ...this.parsePosition(e.coordinateSet) })),
        event: this.$data.monitorDetail.eventsList,
        work: this.$data.monitorDetail.operatorsList,
        warn: this.$data.monitorDetail.violateList,
        inWarn: this.$data.monitorDetail.inViolateList,

        car: this.$data.monitorDetail.workVehicleList
      }
    }
  },
  created() {
    this.postMonitorDetail()
  },

  methods: {
    parsePosition(coordinateSet) {
      try {
        return JSON.parse(coordinateSet)[0]
      } catch (error) {
        return {}
      }
    },

    postMonitorDetail() {
      fetchMonitorGet().then(res => {
        this.$data.monitorDetail = res
      })
    },
    postMonitorCameraGet(cameraId) {
      return fetchMonitorCamera(cameraId)
    },

    handleMarkerClick(marker) {
      if (marker.label === '作业人') {
        this.$refs.taskListRef.open(marker)
      }
      if (marker.label === '作业车辆') {
        this.$refs.taskListRef.open(marker)
      }
      if (marker.label === '路段') {
        this.$refs.taskListRef.open(marker)
      }
      if (marker.label === '摄像头') {
        this.postMonitorCameraGet(marker.id).then(res => {
          this.$refs.videoPlayerRef.open(marker.name, { url: res, fluid: true })
        })
      }
      if (marker.label === '告警') {
        this.$refs.detailViewRef.open(marker, inViolateDetailRender)
      }
      if (marker.label === '正在告警') {
        this.$refs.detailViewRef.open(marker, inViolateDetailRender)
      }
      if (marker.label === '事件') {
        this.$refs.detailViewRef.open(marker, eventDetailRender)
      }
      console.log(marker.label)
    }

  }
}
</script>
<style lang="scss" scoped>

.header{
  display: flex;
  margin-bottom: 16px;

  .info-card {
    width: 330px;
    height: 150px;
    padding: 26px;
    margin-right: 16px;
    box-sizing: border-box;
    border-radius: 2px;
    // box-shadow: 0 0 10px 5px #ddd;
    font-size: 14px;
    background-color: #333;
    color: #fff;
    &:nth-child(1){
      background-image: linear-gradient(to bottom right,#51D6FF, #2E54D9);
    }
    &:nth-child(2){
      background-image: linear-gradient(to bottom right,#9CDD82, #1DA2B5);
    }
    &:nth-child(3){
      background-image: linear-gradient(to bottom right,#F176C2, #6314D6);
    }
    &:nth-child(4){
      background-image: linear-gradient(to bottom right,#FE9555, #CA2626);
    }
    .title{
      margin-bottom: 20px;
      .icon {
        width: 28px;
        height: 28px;
        vertical-align: middle;
        margin-right: 2px;
      }
    }
    .detail-box{
      display: flex;
      align-items: center;
      &>div{
        flex: 1;
      }
      .big {
        display: inline-block;
      }
    }
  }
}
.btns {
  margin-bottom: 20px;
}

</style>
